<template>
  <my-navigation-bar>关于我们</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
   <view v-if="flag">
     <view class="content" :style="flag?{marginTop: '180rpx'}:''">
       <view class="text-box">
        儿童坐姿顾问通过运动传感器信息来智能检测你的头部位置、角度,从而判断坐姿是否端正。它不依赖于其他设备，只需要打开摄像头就可以使用。如果你对孩子的坐姿问题感到烦恼,不妨试试这款小程序。
       </view>
     </view>
   </view>
   <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
   <scroll-view scroll-y="true" class="scroll-box">
     <view class="content" :style="flag?{marginTop: '180rpx'}:''">
       <view class="text-box">
      儿童坐姿顾问通过运动传感器信息来智能检测你的头部位置、角度,从而判断坐姿是否端正。它不依赖于其他设备，只需要打开摄像头就可以使用。如果你对孩子的坐姿问题感到烦恼,不妨试试这款小程序。
       </view>
     </view>
   </scroll-view>
  </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,
  } from "vue";
 import useBounceFunc from "../../hooks/bounce.js";
 const {state, moveH, startH, endH} = useBounceFunc(82);

  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .navbar {
    position: fixed;
    top: 63rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;
  }
.scroll-box {
  height: 100vh;
}
  .content {
    width: 100%;
    height: 100vh;
    margin-top: 150rpx;
    padding: 60rpx 10rpx;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 38rpx;

    text-indent:2em;
     .text-box {
       padding: 10rpx 50rpx;
       line-height: 60rpx;
    }
  }
</style>
